<template>
    <div>
        
            <div class="con" v-for="(item,index) in arr" :key="index">
                <router-link :to="{name:'Details1',params:{wjt:item.id}}">
                    <img :src="item.img" alt="">
                 </router-link>
                <p>{{item.title}} </p>
            </div>
       
        
    </div>
</template>

<script>
import {one} from "@/api/topapi.js"
export default {
    data(){
        return{
            arr:[]
        }
    },
    mounted(){
        one().then((ok)=>{
            this.arr=ok.data.content
        })
    }
}
</script>

<style scoped>
.con{
    width: 3.51rem;
    height: 3.21rem;
    background-color: #fff;
    box-shadow: 0.02rem 0.02rem 0.1rem #ddd;
    box-shadow: -0.02rem -0.02rem 0.1rem #ccc;
     margin-left: 0.125rem;
     border-radius: 0.1rem;
     margin-top: 0.1rem;
     text-align: center;
}
    img{
        width: 3.51rem;
        height: 2.05rem;
        border-radius: 0.1rem;
       
    }
    p{
        margin-top: 0.4rem;
        font-size: 0.20rem;
        color: #333;
        font-weight: bold;
    }
</style>